<template>
  <el-card
    :body-style="{padding:'0 10px'}"
    shadow="hover"
    style="height: 179px;margin-bottom: 20px;width:960px;margin-left: 13px;color:white;border-radius:10px; background-repeat: no-repeat; background-size: 100%;"
    :style="{'background-image': `url(${bgcImg})`}"
    :class="{'no-bgc-img': noBgcImg}"
  >
    <!-- <div slot="header" class="clearfix">
      <span>  {{ $t('route.Profile') }}</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="openUserInfo">  {{ $t('buttons.update') }}</el-button>
    </div> -->
    <div class="boxal" style="display:flex">
      <div class="userInfoLeftNode">
        <div class="imageDiv">
          <img :src="avatar" @error="avatarError()">
          <!-- <img src="../../../assets/tuo.png" alt=""> -->
        </div>
      </div>
      <div class="userInfoRightNode">
        <div class="people" style="margin-top: 20px">
          <!-- <el-tooltip  placement="top" :content="userInfo.userName"></el-tooltip> -->
          <span class="welcomPeople" style="width:188px;height:21px;font-size:18px">{{ $t('dash.welcome') }}, {{ userInfo.userName }}</span></div>
        <div
          style="display:flex;margin-left: -20px;
    margin-top: 20px;
    color: #ffffffd6;
    font-size: 13px;"
        >
          <!-- <div> -->
          <!-- <i class="el-icon-user" /> -->
          <!-- <el-tooltip  placement="top" :content="userInfo.userName"><span class="marginLeft20">{{ userInfo.userName }}</span></el-tooltip></div> -->
          <div class="userInfoColumn">
            <!-- <i class="el-icon-office-building" /> -->
            <!-- <el-tooltip  placement="top" :content="userInfo.orgName"> -->
            <span class="marginLeft20">{{ $t('dash.department') }}: {{ userInfo.orgName }}</span>
            <!-- </el-tooltip> -->
          </div>
          <div class="userInfoColumn">
            <!-- <i class="el-icon-mobile-phone" /> -->
            <!-- <el-tooltip  placement="top" :content="userInfo.mobilePhone"> -->
            <span class="marginLeft20">{{ $t('dash.telephone') }}: {{ userInfo.mobilePhone }}</span>
            <!-- </el-tooltip> -->
          </div>
          <div class="userInfoColumn">
            <!-- <i class="el-icon-message" /> -->
            <!-- <el-tooltip  placement="top" :content="userInfo.email"> -->
            <span class="marginLeft20">{{ $t('dash.email') }}: {{ userInfo.email }}</span>
            <!-- </el-tooltip> -->
          </div>

        </div>
        <!-- 快捷 -->
        <div style="display:flex">
          <div
            style="display: flex;margin-left: -20px;width:390px;justify-content: space-between;
    margin-top: 20px;
    color: #ffffffd6;
    font-size: 13px;
    "
          >
            <div>
              <div class="manth">
                <span>{{ orderSubmint }}</span>
              </div>
              <div class="content">{{ $t("route.orderConfluence") }}</div>
            </div>
            <div>
              <div
                class="manthtwo"
                style="margin-left: 30px;font-size: 18px;
    color: white;"
              >
                <span>{{ orderWait }}</span>
              </div>
              <div class="content">{{ $t("layout.orderaccept") }}</div>
            </div>
            <div>
              <div
                class="manththree"
                style="margin-left: 33px;font-size: 18px;
    color: white;"
              >
                <span>{{ orderRating }}</span>
              </div>
              <div class="content">{{ $t("layout.orderrating") }}</div>
            </div>
            <div>
              <div
                class="manthone"
                style="margin-left: 39px;font-size: 18px;
    color: white;"
              >
                <span>{{ orderCancel }}</span>
              </div>
              <div class="content">{{ $t("layout.ordercancel") }}</div>
            </div>
          </div>
          <div
            style="border: 1px solid white;
    border-radius: 20px;
    font-size: 13px;
    margin-top: 18px;
    width: 100px;
    height: 35px;
    margin-left: 45px;
    cursor:pointer
    "
            @click="all"
          >
            <span
              style="margin-top: 9px;
    display: inline-block;
    margin-left: 10px"
            >{{ $t('dash.AllOrders') }}<div
              style="margin-left:59px;
    margin-top: -18px"
            >
              <img src="@/assets/dashboard/buttonRight.png">
            </div></span>
          </div>
        </div>
      </div>
    </div>

  </el-card>
</template>

<script>
import goodsLanguage from '../dashboard.js'
import { globals } from '@/utils/request'
const viewName = 'dash'
// import DefaultAvatar from '@/assets/morentou.jpg'
import {
  getOrderWaitCount,
  getOrderRatingCount,
  getOrderCancelCount,
  getOrderSubmintCount
} from '@/api/dashboard'
export default {
  name: 'UserInfo',
  components: {

  },
  data() {
    return {
      orderWait: 0,
      orderRating: 0,
      orderCancel: 0,
      orderSubmint: 0,
      bgcImg: '',
      noBgcImg: false
    }
  },
  computed: {
    lang: {
      get() {
        return this.$store.state.app.language
      },
      set(lang) {
        this.$i18n.locale = lang
        this.$store.dispatch('app/setLanguage', lang)
      }
    },
    userInfo() {
      return this.$store.state.user.userInfo
    },
    avatar() {
      return this.$store.state.user.avatar
    }
  },
  created() {
    this.initBgcImg()
    if (!this.$i18n.getLocaleMessage('en')[viewName]) {
      this.$i18n.mergeLocaleMessage('en', goodsLanguage.en)
      this.$i18n.mergeLocaleMessage('zh', goodsLanguage.zh)
    }
  },
  mounted() {
    this.getOrderCount()
  },
  methods: {
    initBgcImg() {
      const bgc1 = require('../../../assets/background.png')
      const bgc2 = require('../../../assets/石榴红.png')
      const bgc3 = require('../../../assets/酱梅橙.png')
      const bgc4 = require('../../../assets/香槟金.png')
      const bgc5 = require('../../../assets/中海绿.png')
      const theme = this.$store.state.settings.theme
      this.noBgcImg = false
      if (theme === '#2F68FD') {
        this.bgcImg = bgc1
      } else if (theme === '#E60027') {
        this.bgcImg = bgc2
      } else if (theme === '#FF5A1F') {
        this.bgcImg = bgc3
      } else if (theme === '#CC9756') {
        this.bgcImg = bgc4
      } else if (theme === '#13B7CF') {
        this.bgcImg = bgc5
      } else {
        const themeImg9 = this.$store.state.settings.themeImg.themeImg9
        if (themeImg9) {
          this.bgcImg = globals.ftpBaseUrl + themeImg9
        } else {
          this.noBgcImg = true
          this.bgcImg = ''
        }
      }
    },
    all() {
      this.$router.push('/ordercenter/myorders')
    },
    openUserInfo() {
      this.$router.push({
        path: '/settings/userInfo'
      })
    },
    avatarError() {
      const img = event.srcElement
      img.src = {}
      img.onerror = null
    },
    getOrderCount() {
      getOrderWaitCount().then((res) => {
        this.orderWait = res
      })
      getOrderRatingCount().then((res) => {
        this.orderRating = res
      })
      getOrderCancelCount().then((res) => {
        this.orderCancel = res
      })
      getOrderSubmintCount().then((res) => {
        this.orderSubmint = res
      })
    }
  }
}
</script>

<style scoped lang="scss">
  /* .userInfo {} */
  .marginLeft20 {
    /* display: inline-block; */
    width: 150px;
    /* overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; */
  }

  .userInfo.image {
    width: 72px;
    height: 72px;
    border-radius: 50%;
  }

  .imageDiv {
    margin: 2rem 1.75rem 0 20px
  }
.manth{
  margin-left: 24px;
  font-size: 18px;
    color: white;
}
  .imageDiv img {
    width:106px;
    height: 106px;
    border-radius: 50px;
  }
.content{
  margin-left:20px;
  margin-top: 5px;
}

.no-bgc-img {
  background-image: linear-gradient(to right, $themeColor 70%, $themeColorAux1 100%) !important;
}
  /* .userInfoLeftNode {
    float: left;
  }

  .userInfoRightNode {
    float: right;
    width: 5.25rem;
  } */

  /* .userInfoColumn {
    margin: 20px 0
  } */
</style>
